<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <title></title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
        <style>
            body, html {
                height: 100%;
            }
            .title span{
                padding-top:20px;
                width:100%;
                text-align: center;
                line-height: 50px;
                font-size: 20px;
                margin: 0 auto;
            }
            .btn {
                width: 50px;
                height: 50px;
            }
            .input-wrap {
                margin: 10px 0;
                display: -webkit-box;
                line-height: 30px;
                border-bottom:1px solid rgba(255,255,255,0.8);
            }
            .form {
                margin: 0 20px 0 20px;
                padding: 0 20px;
                line-height: 30px;
            }
            .input-wrap input {
                display: block;
                -webkit-box-flex: 1;
                outline: none;
                border:none;
                height: 30px;
                font-size:1.4em;
                color:#fff;
                font-family:"Arial";
                -web-kit-appearance:none;
                padding:0 1em;
                text-decoration:none;
                background-color: transparent;
                margin-top:24px;
            }
            .button.green {
                background-color: #269b82;
            }
            .button.green:active{
                background-color: #009688;
            }
            .button.blue {
                background-color: #389fdd;
            }
            .button.blue:active{
                background-color: #0068B0;
            }
            .button {
                display: block;
                color: white;
                font-family:"黑体";
                margin: 10px 40px;
                text-align: center;
                border-radius: 8px;
                height: 40px;
                line-height: 40px;
            }
            .margin-top-25 {
                margin-top: 25px;
            }
            .login-error {
                color: #FF0000;
                font-size: 18px;
                text-indent: 2em;
                display: none;
                padding-top: 8px;
            }
            .content{
                position:relative;
                width:100%;
            }
            input[type=password],input[type=text]{
                margin-bottom:0;
                border-radius: 0;
            }
            .more{
                position:relative;
                display:block;
                margin:0 40px;
                height:30px;
                line-height:30px;
            }
            .forget{
                position:relative;
                display:inline-block;
                float:right;
                text-align:right;
                color:#cbc6c6;
                font-family:"黑体";
                width:90px;
            }
            #logo{
                display:block;
                padding:10%;
                padding-top:100px;
            }
            #logo img{
                width:100%;
            }
            .divider{
                padding:0 20px;
                margin: 20px 40px;
                line-height: 1px;
                border-left: 150px solid #ddd;
                border-right: 150px solid #ddd;
                text-align: center;
                color:#fff;
                font-family:"Arial";
                font-size:1.4em;
            }
            #rememberkey{
                position:relative;
                display:inline-block;
                color:#cbc6c6;
                vertical-align:middle;
            }
            #rememberkey div{
            	display:inline-block;
                margin-left:5px;
                font-family:"黑体";
                color:#cbc6c6;
            }
            #rememberkey span {
                position: relative;
                vertical-align:middle;
            }
            #rememberkey .input_check {
                position: absolute;
                visibility: hidden;
                margin-top:40px;
                vertical-align:middle;
            }
            #rememberkey .input_check+label {
                display: inline-block;
                width: 16px;
                height: 16px;
                border: 1px solid #fff;
            } 
            #rememberkey .input_check:checked+label:after {
                content: "";
                position: absolute;
                left: 2px;
                bottom: 12px;
                width: 9px;
                height: 4px; 
                border: 2px solid #fff;
                border-top-color: transparent;
                border-right-color: transparent; 
                -ms-transform: rotate(-60deg); 
                -moz-transform: rotate(-60deg); 
                -webkit-transform: rotate(-60deg); 
                transform: rotate(-45deg);
            }
            ::-webkit-input-placeholder {
				font-size:14px;
			} 
			input::-webkit-input-placeholder{
			    color: #fff;opacity:1;
			}
        </style>
    </head>
    <body>
        <div id="logo">
            <img src="../../image/login/logo.png" />    
        </div>
        
        <div class="content">
            <div class="form">
                <div class="input-wrap">
                    <input type="text" placeholder="手机号" class="txt" id="username" onfocus="removeErrorTip();"/>
                </div>
                <div class="input-wrap">
                    <input type="password" placeholder="密码" class="txt" id="password" onfocus="removeErrorTip();"/>
                </div>
            </div>
            <div class="more">
                <div id="rememberkey" tapmode onclick="remember();">
                    <span><input type="checkbox" class="input_check" id="remember"><label for="remember"></label></span><div>记住密码</div>
                </div>
                <a class="forget" tapmode onclick="forget()">忘记密码?</a>
            </div>
            <p class="login-error" id="errorTip"></p>
            <div class="button green" id="login" tapmode="" onclick="login()">
                登录
            </div>
            <div class="divider">
                or
            </div>
            
            <div class="button blue" id="login" tapmode="" onclick="register()">
                注册
            </div>
        </div>
    </body>
    <script data-main="../../script/main" src="../../script/require.js"></script>
    <script>
        var username;
    	apiready = function() {
    		require(["zepto","api","md5","common"],function(){
    		    var t_width = api.winWidth/2-80;
    		    $(".divider").css("border-left",t_width+"px solid #ddd");
    		    $(".divider").css("border-right",t_width+"px solid #ddd");
    			url = null;
	            api.addEventListener({
	                name : 'keyback'
	            }, function(ret, err) {
	                var backTime = $api.getStorage("keyback_clickTime");
	                var now = new Date().getTime();
	                if (now - backTime < 1200) {
	                    api.closeWidget();
	                } else {
	                    $api.setStorage("keyback_clickTime", now);
	                    api.toast({
	                        msg : '再点一次返回关闭应用',
	                        duration : 1000,
	                        location : 'bottom'
	                    });
	                }
	            });
	            pref_username = "";
	            pref_pwd = "";
	            $zb.prefs.getPrefs('remember',function(ret){
	            	if(ret.value&&ret.value==true){
	            		 $zb.prefs.getPrefs('loginInfo',function(ret){
	            		 	if(ret.value){
	            		 		var loginKey = JSON.parse(ret.value);
			                    pref_username = loginKey.username;
			                    pref_pwd = loginKey.password;
			                    $("#username").val(pref_username);
			                    $("#password").val(pref_pwd);
	            		 	}
	            		 })
	            	}
	            })
    		});
        };

        function remember(){
            var status = $("#remember").attr("checked");
            if ($("#remember").attr("checked")) {
                $("#remember").removeAttr("checked");
                $zb.prefs.removePrefs("remember");
            } else {
            	$zb.prefs.setPrefs("remember",true);
                $("#remember").attr("checked", true);
            }
        }

        function removeErrorTip() {
            var error = $api.byId('errorTip');
            $api.text(error, '');
            $api.css(error, 'display:none;');
        }

        function login() {
            var user = $api.byId("username");
            var key = $api.byId("password");
            username = $api.val(user);
            var password = $api.val(key);
            var error = $api.byId('errorTip');
            var pwd = "";
            if (!username || username == '') {
                $api.text(error, '提示：请填写手机号！');
                $api.css(error, 'display:block;');
                return;
            }
            if (!password || password == '') {
                $api.text(error, '提示：密码不能为空！');
                $api.css(error, 'display:block;');
                return;
            }
            userinfo = {
                "username" : username,
                "password" : password
            };
            api.showProgress({
                style: 'default',
                animationType: 'fade',
                title: '努力加载中...',
                text: '先喝杯茶...',
                modal: true
            });
            api.ajax({
                url : $zb.urls['common'].login,
                method : 'post',
                data : {
                    values: {
                        username : username,
                        password : $zb.getmd5text(password)
                    }
                }
            }, function(ret, err) {
            	api.hideProgress();
                if(ret){
                    if(ret.status=="OK"){
                        $zb.prefs.setPrefs('token',ret.data['token']);
                        $zb.prefs.setPrefs('userInfo',JSON.stringify(ret.data));
                        $zb.prefs.setPrefs('loginInfo',JSON.stringify(userinfo));
                        openHomePage();
                    }else {
                        api.toast({
                            msg:ret.status
                        });
                    }
                }else{
                    api.toast({
	                    msg:'网络错误'
                    });
                }
            });
        }

        function register(){
        	api.openWin({
	            name: 'register',
	            url: './register.html',
	            bgColor:'widget://image/login/bg.jpg'
            });
        }

        function forget(){
            api.openWin({
	            name: 'forget',
	            url: './forget.html',
	            bgColor:'widget://image/login/bg.jpg'
            });
        }

        function openHomePage() {
            api.openWin({
	            name: 'homepage_win',
	            url: '../homepage/homepage_win.html',
	            reload:true
            });
        }
    </script>
</html>
